<template>
    <div class="excute-history">
        <div class="box-table">
            <el-table v-loading="loading" :data="tableData" tooltip-effect="dark">
                <template slot="empty">
                    <no-data :types="isSearch">
                        <span>暂无数据</span>
                    </no-data>
                </template>
                <el-table-column prop="logId" label="日志ID" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobState" label="状态" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{jobStateList[scope.row.jobState]}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="计划执行时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobStartTime" label="开始时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobEndTime" label="结束时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="costTime" label="时长（s）" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="tableData.length>0" class="box-pagenation">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <check-dialog :data="checkDialogData"></check-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import NoData from '@/components/NoData'
import CheckDialog from '../../taskLogs/CheckDialog'
export default {
    name: 'ExcuteHistory',
    components: {
        NoData,
        CheckDialog
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    data () {
        return {
            checkDialogData: {
                show: false,
                form: ''
            },
            isSearch: false,
            loading: false,
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            jobStateList: ['准备中', '排队中', '运行中', '运行成功', '出错终止', '用户终止', '等待中', '重跑中', '可执行']
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.loading = true
            let params = {
                projectId: this.projectId,
                scheduleId: JSON.parse(localStorage.getItem('scheduleData')).scheduleId,
                scheduleName: '',
                createOper: '',
                pageNum: this.currentPage,
                pageSize: this.pageSize
            }
            this.$post('/experiment/queryScheduleLogs', params).then(res => {
                if (res && res.rows) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleDetail (item) {
            this.checkDialogData = {
                show: true,
                form: item.scheduleLog
            }
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.init()
        },
        handleSizeChange (val) {
            this.pageSize = val
            this.init()
        }
    }
}
</script>
<style lang="less">
    .excute-history {
        height: 100%;
        .box-table {
            height: calc(100% - 10px);
        }
        .el-table {
            .el-table__body-wrapper {
                height: calc(100% - 60px);
                overflow-y: auto;
                overflow-x: hidden;
            }
        }
    }
</style>
